<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户设置</title>
    

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">
    
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/userSeting.css">
    <link rel="stylesheet" href="../js/zui.min.js">
    <link href="../lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
</head>

<body>
    <!-- 导航菜单 -->
    <!-- 头部 -->
    <header id="header">
        <div class="header type_page">
            <h1><img src="../img/public/logo.png" alt=""></h1>
            <ul class="center">
                <li><a href="../index.html">首页</a></li>
                <li><a href="online.html?type=1">同步课程</a></li>
                <li><a href="video_detail.html">在线练习</a></li>
                
            </ul>
            <div class="right">
                <span class="iconfont">课程 &#xeb21;</span>
                <input type="text" placeholder="搜索感兴趣的内容" id="search_input">
                <img src="../img/public/search.png" alt="" id="search">
                <div class="lr">
                    <b id="loginBtn">登录</b>
                    <span>/</span>
                    <b id="registerBtn">注册</b>
                </div>
                <div class="lr">
                    <img src='#'></img>

                    <ul>
                        <li>我是用户名</li>
                        <li><a href="./course.html">课程中心</a></li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li><a href="./userSeting.html">个人中心</a></li>
                        <li>退出登录</li>
                    </ul>
                </div>
            </div>
    </header>
    <!-- 主体内容 -->
    <main>
        <div class="leftNav" id="leftNav">
            <ul>
                <li class="list">
                    <p class="class">
                        <span>课程中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select"><a href="./course.html">我的课程</a></li>
                        <li class="select">我的练习</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="order">
                        <span>订单中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的订单</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="money">
                        <span>资金管理</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的钱包</li>
                        <li class="select">优惠券</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="center">
                        <span>个人中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select active">账户设置</li>
                        <li class="select">我的消息</li>
                        <li class="select">我的评价</li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="rightUser">
            <div class="title_top">
                <span>账户设置</span>
                <span>&gt;</span>
                <span>个人中心</span>
            </div>
            <div class="title_center">
                <span>学员档案</span>
            </div>
            <div class="content_show" id="content_show">

            </div>
        </div>
        <div style="clear: both;"></div>
    </main>
    <!-- 关于 -->

    <footer id="footer">
        <div class="footer type_page">
            <ul class="clearfix">
                <li><a href="javascript:;">首页</a> <span>|</span></li>
                <li><a href="javascript:;">关于我们</a><span>|</span></li>
                <li><a href="javascript:;">加入我们</a><span>|</span></li>
                <li><a href="javascript:;">合作专区</a><span>|</span></li>
                <li><a href="javascript:;">联系我们</a><span>|</span></li>
                <li><a href="javascript:;">开放平台</a><span>|</span></li>
                <li><a href="javascript:;">意见反馈</a><span>|</span></li>
                <li><a href="javascript:;">漏洞提交</a><span>|</span></li>
                <li><a href="javascript:;">隐私政策</a><span>|</span></li>
                <li><a href="javascript:;">版权声明</a><span>|</span></li>
                <li><a href="javascript:;">反盗链声明</a><span>|</span></li>
                <li><a href="javascript:;">网上有害信息举报</a><span>|</span></li>
                <li><a href="javascript:;">备案公示</a><span>|</span></li>
                <li><a href="javascript:;">营业执照</a><span>|</span></li>
                <li><a href="javascript:;">教师资格证公示</a></li>

            </ul>
            <p>京CP备 1303088号 Coyright &copy; 2014-2019 行者信息科技 (北京) 有限公司 │ 地址: 北京市新华区马当路388号C座 │ 电话:010-66666666 │ 京公网安备
                O1010102002533号</p>
            <p>京网文(2018) 4086-308号 │ 网络文化经营许可证: 沪网文 20184086-308号 | 增值电信业务经营许可证: 京B2-20150021 │ 食品经营许可证: JY131014008888
            </p>
            <p>医疗器械经营许可证: 京嘉食药监械经营许20188008号 │ 互联网药品信息服务资格证书: (京) -经营性-2018-0011</p>
        </div>
    </footer>

   

    <!-- 模态窗口 -->
    <div id="layer"></div>

    <!-- 登录 -->
    <form id="login">

        <h1>
            <img src="../img/public/logo.png" alt="">
        </h1>
        <p>
            <span></span>
            <b>使用手机号登录</b>
            <span></span>
        </p>
        <p> <input type="text" placeholder="请输入您的手机号" name="tel" id="logTel"></p>

        <p><input type="password" placeholder="请输入密码" name="pas" id="logPas"></p>
        <p class="err">您输入的账号或者密码不正确</p>
        <p><input type="submit" value="登录" name="sub" id="loginbtn"></p>

        <p>
            <a href="javascript:;">忘记密码？</a>
            <span>还没有账号？ <a href="javascript:;" class="regi">点击注册</a></span>
        </p>
        <p>
            <span></span>
            <b>使用第三方软件登录</b>
            <span></span>
        </p>
        <p>
            <img src="../img/login/wx.png" alt="">
            <img src="../img/login/qq.png" alt="">
            <img src="../img/login/sina.png" alt="">
        </p>
        <span class="close">X</span>
    </form>

    <!-- 注册 -->
    <form id="register">

        <h1>
            <img src="../img/public/logo.png" alt="">
        </h1>
        <p>
            <span></span>
            <b>使用手机号登录</b>
            <span></span>
        </p>
        <p> <input type="text" placeholder="请输入您的手机号" name='tel' id="regTel">
            <br><em class="err">手机号格式错误,请重新输入！</em>
        </p>

        <p><input type="password" placeholder="请输入密码" name='pas' id="regPas">
            <br><em class="err">密码号格式错误,请重新输入！</em>
        </p>
        <p><input type="password" placeholder="请再次输入密码" name='pas1' id="regPas1">
            <br><em class="err">密码两次输入不同,请验证~</em>
        </p>
        <p>
            <input type="text" placeholder="请输入验证码" name='yz'>
            <img src="../img/register/code.jpg" alt="">
            <em class="err">验证码输入不正确</em>
        </p>

        <p><input type="button" value="注册" name="regi" id="regi"></p>

        <p>
            <input type="checkbox" name="check">
            <span>我同意</span>
            <a href="javascript:;">《用户使用协议》</a>
            <span>已有账号<a href="javascript:;" class="log">去登录</a></span>
        </p>


        <span class="close">X</span>
    </form>
    <!-- 固定定位（返回顶部） -->
    <div id="return_top">
        <a href="./course.html"><img src="../img/index/mylesson.png" alt=""></a>
         <img src="../img/index/mytest.png" alt="">
         <img src="../img/index/gotop.png" alt="">
     </div>
 
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/zui.min.js"></script>
    
    <script src="../js/common.js"></script>
    <script src="../js/public.js"></script>
    <script src="../js/userSeting.js"></script>
    <script src="../lib/datetimepicker/datetimepicker.min.js"></script>
    <script>
        window.onload = async function () {
            let mid = getMid();
            //请求获取用户接口
            let result = await sendAjax({
                url: '/v1/user/' + mid
            });
            if (result.code == 200) {
                
                let str = `<div class="my_icon">
                    <span>头像</span>
                    <a href="javascript:;">
                        <img src="${'/'+result.data[0].head_photo_url}" class="myIcon" id="myIcon"/>
                        <div class="change">
                            更换头像
                            <input type="file" class ="btn_file" id="btn_file" name="file1"/>
                        </div>
                    </a>
                </div>
                <div class="my_name">
                    <div class="my_name_left">
                        <span>真实姓名</span>
                        <input type="text" name="realname" id="realname" placeholder="方便老师联系你，只能修改一次哦～" value="${result.data[0].realname}">
                    </div>
                    <div class="my_name_right">
                        <span>昵称</span>
                        <input type="text" name="username" id="username" value="${result.data[0].username}">
                    </div>
                </div>
                <div class="my_sex">
                    <div class="my_name_left">
                        <span>学员性别</span>
                        <label for=""><input type="radio" name="sex" id="" value="1" ${result.data[0].sex==1?"checked":''}><span>男</span></label>
                        <label for=""><input type="radio" name="sex" id="" value="0" ${result.data[0].sex==0?"checked":''}><span>女</span></label>
                    </div>
                    <div class="my_name_right">
                        <span>生日</span>
                        <input type="text" class="form-control form-date" name="user_name" id="birthdate" value="${result.data[0].birthdate}" placeholder="选择或者输入一个日期">
                    </div>
                </div>
                <div class="my_phone">
                    <div class="my_name_left">
                        <span>联系方式</span>
                        ${result.data[0].tel}
                    </div>
                </div>
                <div class="my_learn">
                    
                    <div class="my_name_right" onclick="saveUser()">
                        保存
                    </div>
                </div>`
                $('#content_show').html(str);
                $('#username').prop('maxlength','6')
                $('#realname').prop('maxlength','4')
                // 仅选择日期
                $(".form-date").css('display', 'inline-block');                
                $(".form-date").datetimepicker({
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0,
                    format: "yyyy-mm-dd"
                });
                //点击上传图像按钮
                $('#btn_file').on('change', function () {
                    //获取mid  
                    //    let[,payload]=(window.localStorage.getItem('token')).split('.');
                    //    let {mid} = JSON.parse(window.atob(payload)) ;
                    let mid = getMid();
                    // let mid = 'e9b9972f-387c-40ec-87dc-3a0881627784';
                    let data = new FormData();
                    data.append('file1', this.files[0]);
                    data.append('mid', mid);
                    //使用$.ajax()实现图片上传,因为如果有文件上传，语法的变化比较大，不适合用
                    $.ajax({
                        type: "post",
                        url: "/v1/user/upload",
                        data, //发送ajax请求时提交的数据
                        dataType: "json",
                        contentType: false, //默认表单提交时编码格式是urlencode，但对于上传图片不适用
                        processData: false, //不要对表单就行编码处理，以默认二进制形式提交
                        success: function (response) {
                            $('#myIcon').attr('src', '/' + response.data.newFile);
                            window.localStorage.setItem('photo','/' + response.data.newFile);
                            history.go(0);
                        },
                        error(err) {
                            console.log(err);
                        }
                    });

                })
            }
        }
        
        async function saveUser() {
            //发送请求，更新用户信息
            let mid = getMid();
            
            let data = {
                mid,
                realname: $('#realname').val(),
                username: $('#username').val(),
                sex: $('input[type=radio]:checked').val(),
                birthdate: $('#birthdate').val()
            }
            
           
            //请求获取用户接口
            let result = await sendAjax({
                url: '/v1/user',
                type: 'put',
                data
            });
            if (result.code == 200) {
                window.localStorage.setItem('username', data.username);
                alert('保存成功');
                history.go(0);
            }
        }
    </script>
</body>


</html>